<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>首页 - 驴妈妈统计系统</title>
<meta name="description" content="overview &amp; stats" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="${request.contextPath}/static/assets/js/jquery.2.1.1.min.js"></script>
<link rel="stylesheet" href="${request.contextPath}/static/assets/css/bootstrap.css" />
<link rel="stylesheet"
	href="${request.contextPath}/static/assets/font-awesome/4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="${request.contextPath}/static/assets/css/ace.min.css"
	class="ace-main-stylesheet" id="main-ace-style" />

<link rel="stylesheet"
	href="${request.contextPath}/static/stylesheets/daterangepicker.css">
<script type="text/javascript"
	src="${request.contextPath}/static/javascripts/moment.js"></script>
<script type="text/javascript"
	src="${request.contextPath}/static/javascripts/daterangepicker.js"></script>


<script src="${request.contextPath}/static/assets/js/bootstrap.min.js"></script>

<!-- <script type="text/javascript"
	src="${request.contextPath}/static/javascripts/echarts.js"></script> -->
<style type="text/css">
.demo {
	margin-top: -25px;
	overflow-y: hidden;
	height: 20em;
	opacity:0.8;
}

div.number {
	background-color: #15aefe; 
	width: 20px; 
	height: 29.060000000000002px; 
	line-height: 29.060000000000002px; 
	vertical-align: middle; 
	margin: auto; 
	border-radius: 14.530000000000001px; 
	text-align: center;
}

.title{
	margin:0 auto;
	background-size: 100% 100%; 
	background-repeat: no-repeat;
	width: 205px; 
	height: 50px; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	color: black; 
	font-weight: bold;
	font-family: 'Microsoft Yahei'; 
	font-size: 20px; 
	text-overflow: ellipsis; 
	white-space: nowrap; 
	overflow: hidden;
}
.nav > li > a:hover, .nav > li > a:focus{background-color:#b73766}

/*------------------------------------------------rightOne--------------------*/
#rightOne h2{
	font:normal 31px/31px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#D6487E;
	padding-left:220px;
}
#rightOne p.rghTxt1{
	width:400px;
	font-size:16px;
	line-height:18px;
	display:block;
	color:black;
	font-style:italic;
	padding-left:220px;
}
/*------------------------------------------------rightOne--------------------*/

.table-bordered {
    border: 1px solid white;
}

html { overflow-x: hidden; overflow-y: auto; }

</style>
</head>
<!-- 黑板色:#044161 -->
<body style="background-color: #FFF;">
<!-- PAGE CONTENT BEGINS #1b1b1b #434343;灰色：#505050; -->
<!-- 黑板色: -->
<div class="row">
	<div class="col-sm-8 col-sm-offset-1" style="position: absolute; z-index: 3;top:1em;" align="center">
     	<div id="rightOne">
     		 
             <h2 align="center">${lp.sceneryName!}</h2>
             <p class="rghTxt1" style="width:600px">${lp.productId!}, ${cityName!}, ${lp.starLevel!}</p>
         </div>
    </div>
	<div class="col-sm-2 col-sm-offset-10" style="position: absolute; z-index: 3;top:2em;">
	<span class="label label-xlg label-purple arrowed"  style="cursor: pointer;" onclick="skip('${request.contextPath}/datashow/show_list?page=<#if prodPageNum??>${prodPageNum}<#else>1</#if>&productId=${productConditionVO.productId!}&sceneryName=${productConditionVO.sceneryName!}&cityCode=${productConditionVO.cityCode!}&starLevel=${productConditionVO.starLevel!}');">返回</span>
     	
	</div>
	<!--
	<div class="col-sm-4" style="position: absolute;left:4em;top: 4em;">
		<div style="float:left">
		<div>lmm</div>
		<div style=" width:40px; height:40px; background-color:#D6487E; border-radius:20px;">
	         <span style="height:40px;font-weight:bold; line-height:40px; display:block; color:#FFF; text-align:center"><#if lp??>${lp.productGrade!}</#if></span>
	    </div>
	    </div>
	    <div style="float:left;padding-left:20px">
	    <div>xc</div>
		<div style=" width:40px; height:40px; background-color:#D6487E; border-radius:20px;">
	         <span style="height:40px;font-weight:bold; line-height:40px; display:block; color:#FFF; text-align:center"><#if xcp??>${xcp.productGrade!}</#if></span>
	    </div>
	    </div>
	    <div style="float:left;padding-left:20px">
	    <div>tn</div>
		<div style=" width:40px; height:40px; background-color:#D6487E; border-radius:20px;">
	         <span style="height:40px;font-weight:bold; line-height:40px; display:block; color:#FFF; text-align:center"><#if tnp??>${tnp.productGrade!}</#if></span>
	    </div>
	    </div>
	    <div style="float:left;padding-left:20px">
	    <div>tc</div>
		<div style=" width:40px; height:40px; background-color:#D6487E; border-radius:20px;">
	         <span style="height:40px;font-weight:bold; line-height:40px; display:block; color:#FFF; text-align:center"><#if tcp??>${tcp.productGrade!}</#if></span>
	    </div>
	    </div>
	     <div style="float:left;padding-left:20px">
	    <div>qnr</div>
		<div style=" width:40px; height:40px; background-color:#D6487E; border-radius:20px;">
	         <span style="height:40px;font-weight:bold; line-height:40px; display:block; color:#FFF; text-align:center"><#if qnrp??>${qnrp.productGrade!}</#if></span>
	    </div>
	    </div>
	</div>
	  -->
	<div class="col-sm-4" style="top: 9em;height:445px;">
		<div class="widget-box">
			<div class="title">产品历史价格</div>
			<div class="widget-body">
				<div id="main2" style="height:360px"></div>
			</div>
		</div>
	</div>
	<div class="col-sm-4" style="top: 9em;height:445px;">
		<div class="widget-box">
			<div class="title">商品丰富度</div>
			<div class="widget-body">
				<div id="main3" style="height:360px"></div>
			</div>	
		</div>
	</div>
	<div class="col-sm-4" style="top: 9em;height:445px;">
		<div class="widget-box">
			<div class="title">图片丰富度</div>
			<div class="widget-body">
				<div id="main4" style="height:360px"></div>
			</div>
		</div>
	</div>
	<div class="col-sm-4" style="top: 11em;height:445px;">
		<div class="widget-box">
			<div class="title">商品打包率</div>
			<div class="widget-body">
				<div id="main5" style="height:360px"></div>
			</div>
		</div>
	</div>
	<div class="col-sm-4" style="top:11em;height:445px;">
		<div class="widget-box">
			<div class="title">商品优惠率</div>
			<div class="widget-body">
				<div id="main6" style="height:360px"></div>
			</div>
		</div>
	</div>
	<div class="col-sm-4" style="top:11em;">
		<div class="widget-box">
		<div class="title">商品类型丰富度</div>
		<div class="widget-body">
			<div id="main10" style="height:360px"></div>
		</div>
		</div>
	</div>
	<div class="col-sm-12" style="top: 13em;">
		<div class="widget-box">
			<div class="title">产品评分</div>
			<div class="widget-body">
				<div id="main12"></div>
			</div>
		</div>
	</div>
	<div class="col-sm-4" style="top: 15em;">
	<div class="widget-box">
		<div class="title">年季月度统计值</div>
		<div class="widget-main">
		 <div class="tabbable" style="height: 400px;">
			<ul class="nav nav-tabs padding-12 tab-color-blue" style="border-bottom:0" id="myTab4">
				<li class="active">
					<a data-toggle="tab" href="#home4">年度</a>
				</li>

				<li>
					<a data-toggle="tab" href="#profile4">季度</a>
				</li>

				<li>
					<a data-toggle="tab" href="#dropdown14">月度</a>
				</li>
			</ul>

			<div class="tab-content">
				<div id="home4" class="tab-pane in active">
					<table id="year" class="tab-pane active in table table-striped table-bordered table-hover dataTable no-footer"style="width:100%">
						<thead style="font-size:15px">
							<tr><th>范围</th><th>lmm</th><th>xc</th><th>tn</th><th>tc</th><th>qnr</th><th>mt</th></tr>
						</thead>
						<#if statistics??>
						<tbody>
							<tr><td >平均价</td><td>${statistics.lmmYearAvg!}</td><td>${statistics.xcYearAvg!}</td><td>${statistics.tnYearAvg!}</td><td>${statistics.tcYearAvg!}</td><td>${statistics.qnrYearAvg!}</td><td>${statistics.mtYearAvg!}</td></tr>
							<tr><td>最高价</td><td>${statistics.lmmYearMax!}</td><td>${statistics.xcYearMax!}</td><td>${statistics.tnYearMax!}</td><td>${statistics.tcYearMax!}</td><td>${statistics.qnrYearMax!}</td><td>${statistics.mtYearMax!}</td></tr>
							<tr><td>最低价</td><td>${statistics.lmmYearMin!}</td><td>${statistics.xcYearMin!}</td><td>${statistics.tnYearMin!}</td><td>${statistics.tcYearMin!}</td><td>${statistics.qnrYearMin!}</td><td>${statistics.mtYearMin!}</td></tr>
							<tr><td>同期价</td><td>${statistics.lmmSamePrice!}</td><td>${statistics.xcYearSame!}</td><td>${statistics.tnYearSame!}</td><td>${statistics.tcYearSame!}</td><td>${statistics.qnrYearSame!}</td><td>${statistics.mtYearSame!}</td></tr>
							
						</tbody>
						</#if>
					</table>
				</div>

				<div id="profile4" class="tab-pane">
					<table id="Quarterly" class="tab-pane table table-striped table-bordered table-hover dataTable no-footer">
						<thead>
							
							<tr><th>范围</th><th>lmm</th><th>xc</th><th>tn</th><th>tc</th><th>qnr</th><th>mt</th></tr>
						</thead>
						<tbody>
							<tr><td style="width:59px">平均价</td><td>${statistics.lmmQuarterAvg!}</td><td>${statistics.xcQuarterAvg!}</td><td>${statistics.tnQuarterAvg!}</td><td>${statistics.tcQuarterAvg!}</td><td>${statistics.qnrQuarterAvg!}</td><td>${statistics.mtQuarterAvg!}</td></tr>
							<tr><td style="width:59px">最高价</td><td>${statistics.lmmQuarterMax!}</td><td>${statistics.xcQuarterMax!}</td><td>${statistics.tnQuarterMax!}</td><td>${statistics.tcQuarterMax!}</td><td>${statistics.qnrQuarterMax!}</td><td>${statistics.mtQuarterMax!}</td></tr>
							<tr><td style="width:59px">最低价</td><td>${statistics.lmmQuarterMin!}</td><td>${statistics.xcQuarterMin!}</td><td>${statistics.tnQuarterMin!}</td><td>${statistics.tcQuarterMin!}</td><td>${statistics.qnrQuarterMin!}</td><td>${statistics.mtQuarterMin!}</td></tr>
							<tr><td style="width:59px">同期价</td><td>${statistics.lmmQuarterSame!}</td><td>${statistics.xcQuarterSame!}</td><td>${statistics.tnQuarterSame!}</td><td>${statistics.tcQuarterSame!}</td><td>${statistics.qnrQuarterSame!}</td><td>${statistics.mtQuarterSame!}</td></tr>
							
						</tbody>
					</table>
				</div>
				<div id="dropdown14" class="tab-pane">
					<table id="month" class="tab-pane table table-striped table-bordered table-hover dataTable no-footer">
						<thead>
							<tr><th>范围</th><th>lmm</th><th>xc</th><th>tn</th><th>tc</th><th>qnr</th><th>mt</th></tr>
						</thead>
						<tbody>
							<tr><td style="width:59px">平均价</td><td>${statistics.lmmMonthAvg!}</td><td>${statistics.xcMonthAvg!}</td><td>${statistics.tnMonthAvg!}</td><td>${statistics.tcMonthAvg!}</td><td>${statistics.qnrMonthAvg!}</td><td>${statistics.mtMonthAvg!}</td></tr>
							<tr><td style="width:59px">最高价</td><td>${statistics.lmmMonthMax!}</td><td>${statistics.xcMonthMax!}</td><td>${statistics.tnMonthMax!}</td><td>${statistics.tcMonthMax!}</td><td>${statistics.qnrMonthMax!}</td><td>${statistics.mtMonthMax!}</td></tr>
							<tr><td style="width:59px">最低价</td><td>${statistics.lmmMonthMin!}</td><td>${statistics.xcMonthMin!}</td><td>${statistics.tnMonthMin!}</td><td>${statistics.tcMonthMin!}</td><td>${statistics.qnrMonthMin!}</td><td>${statistics.mtMonthMin!}</td></tr>
							<tr><td style="width:59px">同期价</td><td>${statistics.lmmMonthSame!}</td><td>${statistics.xcMonthSame!}</td><td>${statistics.tnMonthSame!}</td><td>${statistics.tcMonthSame!}</td><td>${statistics.qnrMonthSame!}</td><td>${statistics.mtMonthSame!}</td></tr>
							
						</tbody>
					</table>
				</div>
			</div><!-- table-content -->
		</div>
			
		</div>
		</div>
	</div> 
	<!--  
	<div class="col-sm-4" style="position: absolute; z-index: 3; left: 10px; top: 9em;">
		<h3 style="color:;padding-left:100px">最低价对应商品</h3>
	</div>
	-->
	<div class="col-sm-4" style="top: 15em;">
		<div class="widget-box">
		
		<div class="title">7日内新增商品</div>
		<div class="widget-main">
			<div style="height: 400px;padding-right:5px;color:black">
			<table style="width:100%;" class="table table-striped table-bordered table-hover dataTable no-footer">
				<thead>
				<tr>
				<th>CODE</th>
				<th>商品名称</th>
				</tr>
				</thead>
				<tbody>
					<#if newCommodity??>
					<#if newCommodity.lNewCommodity??&&newCommodity.lNewCommodity?size&gt;0>
					<#list newCommodity.lNewCommodity as comm>
					<tr><td>lmm:  </td><td>${comm.commodityName!}</td></tr>
					</#list>
					</#if>
					<#if newCommodity.xcNewCommodity??&&newCommodity.xcNewCommodity?size&gt;0>
					<#list newCommodity.xcNewCommodity as comm>
					<tr><td>xc:  </td><td>${comm.commodity_name!}</td></tr>
					</#list>
					</#if>
					<#if newCommodity.tnNewCommodity??&&newCommodity.tnNewCommodity?size&gt;0>
					<#list newCommodity.tnNewCommodity as comm>
					<tr><td>tn:  </td><td>${comm.commodity_name!}</td></tr>
					</#list>
					</#if>
					<#if newCommodity.tcNewCommodity??&&newCommodity.tcNewCommodity?size&gt;0>
					<#list newCommodity.tcNewCommodity as comm>
					<tr><td>tc:  </td><td>${comm.commodity_name!}</td></tr>
					</#list>
					</#if>
					<#if newCommodity.qnrNewCommodity??&&newCommodity.qnrNewCommodity?size&gt;0>
					<#list newCommodity.qnrNewCommodity as comm>
					<tr><td>qnr:  </td><td>${comm.commodity_name!}</td></tr>
					</#list>
					</#if>
					<#if newCommodity.mtNewCommodity??&&newCommodity.mtNewCommodity?size&gt;0>
						<#list newCommodity.mtNewCommodity as comm>
								<tr><td>mt:  </td><td>${comm.commodity_name!}</td></tr>
						</#list>
					</#if>
					<#else>
					<tr><td style="color:yellow">暂无</td></tr>
					</#if>
				</tbody>
			</table>
		</div>
		</div>
		</div>
	</div> 
	<div class="col-sm-4" style="top: 15em;">
		<div class="widget-box">
		<div class="title">活跃商品</div> 
		<div class="widget-main">
		<div id="statistic-charts" style="height: 400px;padding-right:5px;color:black">
			<table style="width:100%;"class="table table-striped table-bordered table-hover dataTable no-footer">
				<thead>
				<tr>
				<th>CODE</th>
				<th>商品名称</th>
				</tr>
				</thead>
				<tbody>
					<tbody>
					<#if activeComms??>
					<#if activeComms.lActiveComms??&&activeComms.lActiveComms?size&gt;0>
					<#list activeComms.lActiveComms as comm>
					<tr><td>lmm:  </td><td>${comm.commodityName!}</td></tr>
					</#list>
					</#if>
					<#if activeComms.xcActiveComms??&&activeComms.xcActiveComms?size&gt;0>
					<#list activeComms.xcActiveComms as comm>
					<tr><td>xc:  </td><td>${comm.commodity_name!}</td></tr>
					</#list>
					</#if>
					<#if activeComms.tnActiveComms??&&activeComms.tnActiveComms?size&gt;0>
					<#list activeComms.tnActiveComms as comm>
					<tr><td>tn:  </td><td>${comm.commodity_name!}</td></tr>
					</#list>
					</#if>
					<#if activeComms.tcActiveComms??&&activeComms.tcActiveComms?size&gt;0>
					<#list activeComms.tcActiveComms as comm>
					<tr><td>tc:  </td><td>${comm.commodity_name!}</td></tr>
					</#list>
					</#if>
					<#if activeComms.qnrActiveComms??&&activeComms.qnrActiveComms?size&gt;0>
					<#list activeComms.qnrActiveComms as comm>
					<tr><td>qnr:  </td><td>${comm.commodity_name!}</td></tr>
					</#list>
					</#if>

						<#if activeComms.mtActiveComms??&&activeComms.mtActiveComms?size&gt;0>
							<#list activeComms.mtActiveComms as comm>
								<tr><td>mt:  </td><td>${comm.commodity_name!}</td></tr>
							</#list>
						</#if>
					<#else>
					<tr><td style="color:yellow">暂无</td></tr>
					</#if>
				</tbody>
			</table>
		</div>
		</div>
		</div>
	</div> 

	</div>
	<input type="hidden" id="productId" value="${lp.productId!}">
	<input type="hidden" id="showlistcontext" value="${request.contextPath}">
	<script src="${request.contextPath}/static/assets/js/user/base.js"></script>
	<script src="${request.contextPath}/static/javascripts/d3.min.js"></script>
	<script src="${request.contextPath}/static/javascripts/g2.js"></script>
	<script src="${request.contextPath}/static/javascripts/slider.js"></script>
	<script src="${request.contextPath}/static/javascripts/g2-modal.js"></script>
	<!-- 引入 slider 组件脚本 -->
	<!-- G2图表 -->
	
		<script type="text/javascript">
		d3.select(self.frameElement).style("height", "2100px");
		productId=$("#productId").val();
		showlistcontext=$("#showlistcontext").val();
			$.ajax({
				url : showlistcontext+'/datashow/statisticsList',
				type : "GET",
				data : {
					productId:productId
				},
				success:function(data){
					if(data.sessionStatus==540){//异步请求session过期状态
						window.location.href=showlistcontext+"/login";
						return;
					}else{
						
						priceData=data.priceData;
						imageNumData=data.imageNumData;
						commNumData=data.commNumData;
						commTypeNumData=data.commTypeNumData;
						preNumData=data.preNumData;
						packNumData=data.packNumData;
						prodScoreData=data.prodScoreData;

						var data = priceData;
						var defs = {
								'time':{
									type: 'time',
									tickCount: 7,
									mask:"yyyy.mm.dd"
								}
							};
						lineChartModal(prodScoreData,"main12","time","amount","category","","",350,defs);
						lineChartModal(imageNumData,"main4","time","amount","category","","",350,defs);
						lineChartModal(commNumData,"main3","time","amount","category","","",350,defs);
						lineChartModal(commTypeNumData,"main10","time","amount","category","","",350,defs);
						lineChartModal(preNumData,"main6","time","amount","category","","",350,defs);
						lineChartModal(packNumData,"main5","time","amount","category","","",350,defs);
						lineChartModal(priceData,"main2","time","amount","category","","",350,defs);
						/*
						 var chart = new G2.Chart({
					        id: 'main12',
					        forceFit: true,
					        height: 450
					      });
					 chart.source(data, {
					        time: {
					          alias: '日期'
					        },
					        amount: {
					          alias: '数量（个）'
					        }
					      });
					      chart.line().position('time*amount').color("category");
					     // chart.render(); 
					      var slider = new Slider({
						        domId: 'slider',
						        height: 30,
						        charts: [main12],
						        xDim: 'time',
						        yDim: 'amount'
						      });
						      slider.render();*/
					}
				}
			});
	 
	 
	</script>
	</body>
</html>